<template>
  <div id="app">
    <a-layout id="components-layout-demo-custom-trigger">
      <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
        <div class="logo"/>
        <a-menu
          :default-selected-keys="['1']"
          :default-open-keys="['sub1']"
          mode="inline"
          theme="dark"
          :inline-collapsed="collapsed"
          @select="selectedHandler"
        >
          <template v-for="(menu, index) in menu_list">
            <a-menu-item v-if="menu.children.length === 0" :key="menu.id">
              <router-link :to="menu.menu_url">
                <a-icon type="mail"/>
                {{ menu.title }}
              </router-link>
            </a-menu-item>
            <a-sub-menu v-else :key="menu.id">
              <span slot="title">
                <a-icon :type="menu.icon"/>
                <span>{{ menu.title }}</span>
              </span>
              <a-menu-item
                v-for="(child_menu, child_index) in menu.children"
                :key="child_menu.id"
              >
                <router-link :to="child_menu.menu_url">{{
                    child_menu.title
                  }}
                </router-link>
              </a-menu-item>
            </a-sub-menu>
          </template>
        </a-menu>
      </a-layout-sider>
      <a-layout>
        <a-layout-header style="background: #fff; padding: 0">
          <a-icon
            class="trigger"
            :type="collapsed ? 'menu-unfold' : 'menu-fold'"
            @click="() => (collapsed = !collapsed)"
          />
        </a-layout-header>
        <a-layout-content
          :style="{
            margin: '24px 16px',
            padding: '24px',
            background: '#fff',
            minHeight: '280px',
          }"
        >
          <router-view></router-view>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>
<script>
export default {
  name: "Base",
  data() {
    return {
      collapsed: false,
      menu_list: [
        {
          id: 1,
          icon: "mail",
          title: "展示中心",
          tube: "",
          menu_url: "/hippo/workbench",
          children: [],
        },
        {
          id: 2,
          icon: "mail",
          title: "资产管理",
          menu_url: "/hippo/host",
          children: [],
        },
        {
          id: 3,
          icon: "bold",
          title: "批量任务",
          tube: "",
          menu_url: "/hippo/workbench",
          children: [
            {
              id: 10,
              icon: "mail",
              title: "执行任务",
              menu_url: "/hippo/multi_exec",
            },
            {
              id: 11,
              icon: "mail",
              title: "指令模板",
              menu_url: "/hippo/template_manage",
            },
          ],
        },
        {
          id: 4,
          icon: "highlight",
          title: "代码发布",
          tube: "",
          menu_url: "/hippo/workbench",
          children: [
            {id: 12, title: "应用管理", menu_url: "/hippo/release"},
            {id: 13, title: "发布申请", menu_url: "/hippo/release_apply"},
          ],
        },
        {
          id: 6,
          icon: "mail",
          title: "配置管理",
          tube: "",
          menu_url: "/hippo/workbench",
          children: [
            {id: 14, title: "环境管理", menu_url: "/hippo/environment"},
            {id: 15, title: "服务配置", menu_url: "/hippo/workbench"},
            {id: 16, title: "应用配置", menu_url: "/hippo/workbench"},
          ],
        },
        {
          id: 5,
          icon: "mail",
          title: "定时计划",
          tube: "",
          menu_url: "/hippo/schedule",
          children: [],
        },
        {
          id: 7,
          icon: "mail",
          title: "监控",
          tube: "",
          menu_url: "/hippo/monitor",
          children: [],
        },
        {
          id: 8,
          icon: "mail",
          title: "报警",
          tube: "",
          menu_url: "/hippo/workbench",
          children: [
            {id: 17, title: "报警历史", menu_url: "/hippo/workbench"},
            {id: 18, title: "报警联系人", menu_url: "/hippo/workbench"},
            {id: 19, title: "报警联系组", menu_url: "/hippo/workbench"},
          ],
        },
        {
          id: 9,
          icon: "mail",
          title: "用户管理",
          tube: "",
          menu_url: "/hippo/workbench",
          children: [
            {
              id: 20,
              title: "账户管理",
              tube: "",
              menu_url: "/hippo/workbench",
            },
            {
              id: 21,
              title: "角色管理",
              tube: "",
              menu_url: "/hippo/workbench",
            },
            {
              id: 22,
              title: "系统设置",
              tube: "",
              menu_url: "/hippo/workbench",
            },
          ],
        },
      ],
    };
  },
  methods: {
    selectedHandler(item, key, selectedKeys) {
      console.log(">>>>>", item, key, selectedKeys);
    },
  },
};
</script>

<style scoped>
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}
</style>
